<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="vue.js"></script>
<body>
    <div id="app">
        <com v-on:myfunc="sayHello" v-on:bye="sayBye"></com>
       
    </div>
    <template id="say">
        <div>
            <h1>这是一个组件</h1>
            <input type="button" value="组件中的sayHello"  @click="comclick">
            <input type="button" value="组件中的sayBye"  @click="comBye">
        </div>
    </template>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                name:'小明',
                age:28,
            },
            methods:{
                sayHello:function(){
                    console.log('vm中的sayHello');
                },
                sayBye(name,age){
                    console.log('vm中的sayBye' + name + ':'+ age);
                }
            },
            components:{
                com:{
                    template:"#say",
                    methods:{
                        comclick:function(){
                            this.$emit('myfunc');
                        },
                        comBye:function(){
                            // $emit的第一个参数，永远是传递过来方法的引用名
                            // 如果调用带参数的方法，那么只需要吧要传递的参数，放在参数列表的第2位，第3位等等就可以
                            this.$emit('bye','小明',21);

                        },
                    }
                }
            }
        })
    </script>
</body>
</html>